<template>
    <div>
        <div class="searchMap">
            <el-input v-model="mapsearch" clearable id="tipinput" placeholder="请输入"
                @change="handlemapsearch"></el-input>
            <transition name="el-zoom-in-top">
                <div id="panel" v-if="searchData.length > 0">
                    <div class="item_word" v-for="(item, index) in searchData" :key="index"
                        @click="handlemapkeywordbtn(item)">{{ item.name }}</div>
                </div>
            </transition>
        </div>
        <!-- 输入要搜索的地址<input type="text" id="tipinput" @change="handlemapsearch"> -->
        <div id="container"></div>
    </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import '@/mapJs/index.js'
export default {
    name: '',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        return {
            // path: '',
            // jd: 0,
            // wd: 0,
            // map: null,
            // text: '',
            mapsearch: null,            // 地图搜索关键字
            map: null,                  // 地图实例
            searchData: [],             // 搜索内容
            markerCurrent: null,        // 当前地图戳的点位
            markerTextCurrent: null,    // 当前地图戳的文字
            marker: "",
            // 位置信息
            form: {
                lng: "",
                lat: "",
                address: "",
                //地区编码
                adcode: "",
            },


        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        const { path, jd, wd } = this.$route.query;
        this.path = path;
        this.jd = jd;
        this.wd = wd;
        this.initAMap();
    },
    methods: {

        initAMap() {
            window._AMapSecurityConfig = {
                securityJsCode: "b7cf81192a9297f3976279b0adcab92a",
            };
            AMapLoader.load({
                key: "0856fb24f7025fd96dedbee4cdc8df38", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                // plugins: [ "AMap.Autocomplete","AMap.PlaceSearch"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
            })
                .then((AMap) => {
                    // this.map = new AMap.Map("container", {
                    //     // 设置地图容器id
                    //     viewMode: "2D", // 是否为3D地图模式
                    //     zoom: 16, // 初始化地图级别
                    //     center: [118.675724, 24.874452], // 初始化地图中心点位置
                    //     //   center: [this.jd, this.wd], // 初始化地图中心点位置
                    // });
                    this.map = new AMap.Map("container", {
                        resizeEnable: true,
                        mapStyle: 'amap://styles/a9f8af7c51ff24b217818bd1cb4ed23d', // yyh 蓝白
                        center: [118.675724, 24.874452],
                        zoom: 16,
                        // zooms: [10, 20],
                        resizeEnable: true,
                        pitch: 0,                   // 地图俯仰角度，有效范围 0 度- 83 度
                        viewMode: "3D",             // 地图模式
                        buildingAnimation: true,    // 默认false,表示是否将建筑物动画显示
                        animateEnable: true,
                    });
                    this.addMaptoolBar();                           // 添加地图控件
                    this.map.on("click", this.handlemapclickbtn);  // 地图添加点击事件
                })
                .catch((e) => {
                    console.log(e);
                });
        },
        // 添加地图控件
        addMaptoolBar() {
            let _this = this;
            AMap.plugin(['AMap.ToolBar'], function () {
                // 在图面添加工具条控件, 工具条控件只有缩放功能
                _this.map.addControl(new AMap.ToolBar());
            });
        },
        // 搜索-input_change事件
        handlemapsearch(val) {
            console.log(val);

            if (!val) {
                this.searchData = [];
                return;
            }
            let _this = this;
            AMap.plugin('AMap.PlaceSearch', function () {
                let autoOptions = {
                    city: '北京',
                    pageSize: 20
                }
                let placeSearch = new AMap.PlaceSearch(autoOptions);
                placeSearch.search(_this.mapsearch, function (status, result) {
                    _this.searchData = result.poiList.pois || [];
                })
            })
        },
        // 点击搜索的关键字
        handlemapkeywordbtn(item) {
            let jwd = [item.location.lng, item.location.lat];
            this.mapsearch = item.name;
            this.map.panTo(jwd);
            this.map.setZoom(17);
            this.searchData = [];
        },
        // 地图点击点击事件
        handlemapclickbtn(e) {
            // 先清除
            // if (this.markerCurrent) {
            //     this.markerCurrent.setMap(null);
            //     this.markerTextCurrent.setMap(null);
            //     this.markerCurrent = null;
            //     this.markerTextCurrent = null;
            // }

            // let bbox = [e.lnglat.getLng(), e.lnglat.getLat()];

            // this.markerCurrent = new AMap.Marker({
            //     position: bbox,
            //     icon: new AMap.Icon({
            //         image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            //         imageSize: new AMap.Size(25, 30),
            //         size: new AMap.Size(25, 30),
            //     }),
            //     extData: {
            //         bbox: bbox
            //     },
            // });
            // this.markerCurrent.setMap(this.map);

            // this.markerTextCurrent = new AMap.Text({
            //     text: '测试设备',
            //     anchor: "center", // 设置文本标记锚点
            //     cursor: "pointer",
            //     angle: 0,
            //     offset: [10, -10],
            //     style: {
            //         "background-color": "#ffffff00",
            //         border: "none",
            //         "text-align": "center",
            //         "font-size": ".14rem",
            //         color: "#000",
            //     },
            //     extData: {
            //         bbox: bbox
            //     },
            //     position: bbox,
            // });
            // this.markerTextCurrent.setMap(this.map);
            // 获取经纬度
            this.form.lng = e.lnglat.lng;
            this.form.lat = e.lnglat.lat;
            console.log(this.form);

            // 清除点
            this.removeMarker();
            // 标记点
            this.setMapMarker();
        },
        // 标记点
        setMapMarker() {
            // 自动适应显示想显示的范围区域
            this.map.setFitView();
            this.marker = new AMap.Marker({
                map: this.map,
                position: [this.form.lng, this.form.lat],
            });
            this.map.setFitView();
            this.map.add(this.marker);
        },
        // 清除点
        removeMarker() {
            if (this.marker) {
                this.map.remove(this.marker);
            }
        },
        close(){
            this.map.destroy();
            this.map = null;
        }

    },
    destroyed() {
        this.close()
    }
};
</script>
<style scoped>
#container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 400px;
}

a {
    text-decoration: none;
}
</style>